import React, { useState } from 'react';
import { Form, Select, Modal, Input } from 'antd';
import CodeMirror from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';
import Icon from '../../icon/Icon';

const screenIcon: React.CSSProperties = {
  position: 'absolute',
  right: 0,
  top: '5px'
}

const FormItem = Form.Item;
const Option = Select.Option;
const extensions = [javascript({ jsx: true })];

const typeOptions = ['edit', 'delete', 'detail', 'others']
const typeOptionsMap = {
  'edit': '编辑', 'delete': '删除', 'detail': '详情', 'others': '其他'
}

const ButtonController = ({ initialValue, onChange }: { onChange: (v: object) => void; initialValue: any }) => {

  const [visible, setVisible] = useState(false);
  const [codeMirrorValue, setCodeMirrorValue] = useState('');

  function show() {
    setVisible(true);
    setCodeMirrorValue(initialValue?.scriptText || '');
  }

  function onOk() {
    setVisible(false);
    onChange({ scriptText: codeMirrorValue })
    setCodeMirrorValue('');
  }

  return (
    <>
      <FormItem label='类型'>
        <Select
          value={initialValue?.type || 'default'}
          onChange={e => {
            onChange({ type: e })
          }}>
          {typeOptions.map(item => (
            <Option key={item} value={item}>{typeOptionsMap[item]}</Option>
          ))}
        </Select>
      </FormItem>
      <FormItem label='文字'>
        <Input
          value={initialValue?.text}
          onChange={e => {
            onChange({ text: e.target.value })
          }} />
      </FormItem>
      <FormItem label='文字(EN)'>
        <Input
          value={initialValue?.textEn}
          onChange={e => {
            onChange({ textEn: e.target.value })
          }} />
      </FormItem>
      <FormItem label='隐藏'>
        <Input
          placeholder='"{{status}}"==10'
          value={initialValue?.displayScript}
          onChange={e => {
            onChange({ displayScript: e.target.value })
          }} />
      </FormItem>
      <div style={{ position: 'relative' }}>{
        initialValue?.type === 'others' ?
          <>
            <FormItem label='脚本内容'>
              <CodeMirror
                value={initialValue?.scriptText}
                onChange={(e: string) => {
                  onChange({ scriptText: e })
                }} />
            </FormItem>
            <Icon
              style={screenIcon}
              icon='&#xe67c;'
              onClick={show} />
          </> :
          <FormItem label="操作url" >
            <Input
              disabled={initialValue.type === 'detail'}
              value={initialValue?.url}
              onChange={e => {
                onChange({ url: e.target.value })
              }} />
          </FormItem>
      }

      </div>
      <Modal
        visible={visible}
        title='脚本'
        width={1000}
        onCancel={() => setVisible(false)}
        onOk={onOk}>
        <CodeMirror
          extensions={extensions}
          onChange={setCodeMirrorValue}
          value={codeMirrorValue} />
      </Modal>
    </>
  )
}

export default ButtonController;